<template>
  <div>
    <h2>计时管理</h2>
    <!-- 搜索功能 -->
    <el-form :inline="true" :model="searchForm" class="demo-form-inline">
      <el-form-item label="计时类型">
        <el-select v-model="searchForm.name" placeholder="请输入计时类型">
          <el-option label="全部" value="">全部</el-option>
          <el-option label="一级技工" value="一级技工">一级技工</el-option>
          <el-option label="二级技工" value="二级技工">二级技工</el-option>
          <el-option label="三级技工" value="三级技工">三级技工</el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="关键词">
        <el-input v-model="searchForm.keyword" placeholder="请输入内容" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="fetchWorkLogs">搜索</el-button>
        <el-button @click="resetSearch">重置</el-button>
        <!-- 新增按钮 -->
        <el-button type="primary" @click="openDialog">新增</el-button>
      </el-form-item>
    </el-form>

    <!-- 列表显示 -->
    <el-table :data="workLogsList" stripe style="width: 100%">
      <el-table-column prop="name" label="计时类型名称"></el-table-column>
      <el-table-column prop="basenum" label="计时工资基数"></el-table-column>
      <el-table-column prop="status" label="状态">
        <template slot-scope="scope">
          <span v-if="scope.row.status=== 1">已启用</span>
          <span v-else-if="scope.row.status=== 0">已停用</span>
        </template>
      </el-table-column>
      <el-table-column prop="createtime" label="创建时间"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="primary"  @click="editWorkLog(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="deleteWorkLog(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size="pageSize"
        :total="total"
        layout="total, prev, pager, next, jumper"
        style="margin-top: 20px; text-align: right;"
    ></el-pagination>
    <!-- 编辑/新增对话框 -->
    <el-dialog title="编辑" :visible.sync="dialogVisible" style="width:80%;">
      <el-form :model="currentWorkLog" :rules="rules" ref="timeform">
        <el-row :gutter="24">
          <el-col :span="6">
            <el-form-item label="计时类型名称" prop="name">
              <el-select v-model="currentWorkLog.name" placeholder="请选择计时类型名称">
                <el-option value="一级技工">一级技工</el-option>
                <el-option value="二级技工">二级技工</el-option>
                <el-option value="三级技工">三级技工</el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="计时工资基数" prop="basenum">
              <el-input v-model="currentWorkLog.basenum" type="number" style="width:150px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="状态" prop="status">
              <el-select v-model="currentWorkLog.status">
                <el-option label="已启用" :value="1"></el-option>
                <el-option label="已停用" :value="0"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveWorkLog">保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      searchForm: {
        name: '',
        keyword: '',
      },
      workLogsList: [],
      dialogVisible: false,
      currentWorkLog: {
        id: null,
        name: '',
        basenum: 1.0,
        status: 0,
        createtime: ''
      },
      currentPage: 1,
      pageSize: 10,
      total: 0,
      rules: {
        name: [{required: true, message: '请选择计时类型名称', trigger: 'blur'}],
        basenum: [{required: true, message: '请输入计时工资基数', trigger: 'blur'}],
        status: [{required: true, message: '请选择状态', trigger: 'blur'}]
      },
    };
  },
  methods: {
    async fetchWorkLogs() {
      try {
        const params = {
          page: this.currentPage,
          size: this.pageSize,
          name: this.searchForm.name,
          keyword: this.searchForm.keyword
        };
        axios.get('/api/worklogs/list', {params}).then(response => {
          this.workLogsList = response.data;
          this.total = this.workLogsList.length;
        });
      } catch (error) {
        console.error('获取工时记录失败', error);
      }
    },
    handleCurrentChange(page) {
      this.currentPage = page;
      this.fetchWorkLogs();
    },
    resetSearch() {
      this.searchForm.name = '';
      this.searchForm.keyword = '';
      this.currentPage = 1; // Reset to first page
      this.fetchWorkLogs(); // 重置后重新搜索
    },
    // 打开对话框（新增）
    openDialog() {
      this.currentWorkLog = {id: null, name: '', basenum: 1.0, status: 0, createtime: ''};
      this.dialogVisible = true;
    },
    // 编辑
    editWorkLog(WorkLog) {
      this.currentWorkLog = {...WorkLog}; // 克隆对象，避免直接修改原数据
      this.dialogVisible = true;
    },
    // 保存（新增或编辑）
    async saveWorkLog() {
      try {
        this.$refs.timeform.validate(async (valid) => {
          if (valid) {
            if (this.currentWorkLog.id) {
              await axios.put(`/api/worklogs/update`, this.currentWorkLog); // 编辑工时记录
            } else {
              await axios.post('/api/worklogs/add', this.currentWorkLog); // 新增工时记录
            }
            this.dialogVisible = false;
            await this.fetchWorkLogs(); // 刷新工时记录
            this.resetForm()
          }
        });
      } catch (error) {
        console.error('保存工时记录失败', error);
      }
    },
    // 删除员工
    async deleteWorkLog(WorkLog) {
      try {
        await axios.delete(`/api/worklogs/delete/${WorkLog.id}`); // 删除工时记录
        await this.fetchWorkLogs(); // 刷新工时记录
      } catch (error) {
        console.error('删除工时记录失败', error);
      }
    },
    resetForm() {
      this.currentWorkLog = {};

    },
  },
  created() {
    this.fetchWorkLogs();
  },
};
</script>
<style scoped>
h2 {
  margin-bottom: 20px;
}

.el-table {
  margin-bottom: 20px;
}

.dialog-footer {
  text-align: right;
}
</style>
